<template>
	<div class='project-comments'>
		<el-form>
			<h2 class="center">评论信息</h2>
			<div
				v-if="comments.length===0"
				class="center"
			>
				无评论信息
			</div>
			<div
				class="comments"
				v-infinite-scroll="loadComments"
				infinite-scroll-distance="20"
				:infinite-scroll-disabled="showAll"
			>
				<div
					class="comment"
					v-for="(comment,index) in comments"
					:key="index"
				>
					<el-avatar
						:size="50"
						:src="comment.user.avatarUrl"
					>
						<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png">
					</el-avatar>
					<div class="right">
						<header>
							<span class="name">{{comment.user.nickname}}</span>
							<span class="score"><i class="el-icon-star-on" />{{comment.score}}</span>
							<span class="time">{{comment.time}}</span>
						</header>
						<div class="comment-content">{{comment.comment}}</div>
						<footer>
							<span class="filename">{{comment.filename}}</span>
							<i
								class="delete el-icon-delete"
								@click="deleteComment(comment,index)"
							/>
						</footer>
					</div>
				</div>
			</div>
		</el-form>
	</div>
</template>

<script>
import {
  getComments,
  removeFile,
} from '@project/api/project'
export default {
  props: {
    project: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      showAll: false,
      comments: []
    }
  },
  methods: {
    /* 获取评论信息 */
    async loadComments() {
      this.showAll = true
      const res = await getComments({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        projectId: this.$route.query.id
      })

      console.log(res.data)
      this.comments = this.comments.concat(res.data.pageData.map(comment => {
        const file = this.project.resources.find(item => item.id === comment.resourceId)

        comment.time = moment(comment.time).format('YYYY/MM/DD HH:mm:ss')
        comment.filename = file.name
        return comment
      }))

      if (this.comments.length < res.data.total) {
        this.pageNum++
        this.showAll = false
      } else {
        this.showAll = true
      }
    },
    deleteComment(comment, index) {
      this.$confirm('确认删除该评论？请勿随意使用该操作！', async() => {
        await removeFile(comment.resourceId, comment.user.userId)
        this.$warn('已删除该评论')
        this.comments.splice(index, 1)
      })
    },
  }
}
</script>

<style lang='scss' scoped>
.project-comments {
  .el-form {
    height: 100%;
  }

  .comment {
    display: flex;
    padding: 10px;
    margin: 5px;
    background-color: #ffffff;
    border-radius: $radiusSmall;
    box-shadow: $shadow1;

    .right {
      flex: 1;
      padding-left: 10px;
      font-size: 0.8em;

      header {
        display: flex;

        .name {
          padding: 0 10px;
          color: #ffffff;
          background-color: $origin2;
          border-radius: 22px;
        }

        .score {
          flex: 1;
          margin-left: 10px;
          color: $origin2;
        }

        .time {
          color: $dark3;
        }
      }

      .comment-content {
        padding: 5px 0;
      }

      footer {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;

        .filename {
          color: $dark3;
        }
      }
    }

    .delete {
      color: $red;
      cursor: pointer;
    }
  }
}
</style>
